<!DOCTYPE html>
<style type="text/css">
    @import "style.css";
</style>
<html>
    <meta charset="utf-8">
    <title>登录QQ邮箱</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        body{
            font-size:12px;
        }
    </style>
    <body>
        <div class="header">
            <img src="logo.png">
            <nav>
                <a href="#">基本版</a> | 
                <a href="#">English</a> | 
                <a href="#">手机版</a> | 
                <a href="#">企业邮箱</a>
            </nav>
        </div>
        <div class="content">
            <div class="text">
                <h1>QQ邮箱，常联系！</h1>
                <p>1987年9月14日21时07分</p>
                <p>中国第一封电子邮件</p>
                <p>从北京发往德国</p>
                <p>“越过长城，走向世界”</p>
            </div>
            <div class="pic">
                    <img src="Computer.gif" width="300" height="300"> 
            </div>
            <div class="login">
                <ul class="sidebar">
                    <li class="tab1">微信登录</li>
                    <li class="tab2">QQ登录</li>
                </ul>
                <input type="text" placeholder="&nbsp;&nbsp;支持QQ号/邮箱/手机号登录" class="acount" style="color:#aaaaaa"/><br>
                <input type="password" placeholder="&nbsp;&nbsp;QQ密码" class="password" /><br>
                <input type="checkbox" class="checkbox" />
                <p>下次自动登录</p><br>
                <input type="submit" value="登&nbsp;录" class="submit">
                <nav>
                    <a href="#" class="code">扫码快捷登录</a>
                    <a href="#" class="forget">忘了密码？</a>
                </nav>
            </div>
        </div>
        <div class="footer">
                <p><a href="#">关于腾讯</a> | <a href="#">服务条款</a> | <a href="#">隐私政策</a> | <a href="#">客服中心</a> | <a href="#">联系我们</a> | <a href="#">帮助中心</a> | ©1998 - 2020 Tencent Inc. All Rights Reserved.</p>
        </div>
    </body>
</html>